<template>
  <div class="card-out-container">
    <a-spin :spinning="spinning">
      <CustomTable
        rowKey="id"
        :loading="loading"
        bordered
        size="small"
        :dataSource="dataSource"
        :columns="columns"
        :scroll="{ y: 'calc(100vh - 320px)' }"
        :pagination="ipagination"
        @change="handleTableChange"
        :rowSelection="null"
        :showMore="showMore"
        :operateMargin="true"
        :drag="false"
        storeTableName="reworkStyleProcess"
        tableColumnsSort="reworkStyleProcessSort"
        :resizeColumns="true"
      >
        <template #operateLeft>
          <div class="operate-left">
            <a-button type="primary" @click="exportTable" class="mr-10">{{ $t('common.outputExcel') }}</a-button>
            <!--<a-button type="primary" ghost @click="printTable">打印</a-button>-->
          </div>
        </template>
        <template #operateRight>
          <div class="slot-operate-right">
            <a-form layout="inline">
              <a-form-item :label="$t('deviceManage.waterLineNo')" >
                <a-select v-model:value="queryParam.lineNoList"  mode="multiple" :placeholder="$t('common.pleaseSelect')" allowClear show-search>
                  <a-select-option v-for="item in waterList" :key="item.key" :value="item.lineNo">{{ item.lineNo }}</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item :label="$t('basicData.styleNo')" >
                <a-select v-model:value="queryParam.styleNo" mode="multiple" :placeholder="$t('common.pleaseSelect')" allowClear show-search>
                  <a-select-option v-for="item in styleList" :key="item.key" :value="item.styleNo">{{ item.styleNo }}</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item :label="$t('hangManage.makeNo')" >
                <a-select v-model:value="queryParam.moNo" mode="multiple" :placeholder="$t('common.pleaseSelect')" allowClear show-search>
                  <a-select-option v-for="item in allMakeList" :key="item.key" :value="item.moNo">{{ item.moNo }}</a-select-option>
                </a-select>
              </a-form-item>

              <a-form-item :label="$t('common.selectDate')">
                <a-range-picker
                    v-model:value="queryParam.time"
                    :placeholder="[$t('common.startDate'), $t('common.endDate')]"
                    format="YYYY-MM-DD"
                    valueFormat="YYYY-MM-DD"
                />
              </a-form-item>
              <a-form-item>
                <a-space>
                  <a-button type="primary" @click="loadData">{{ $t('common.search') }}</a-button>
                </a-space>
              </a-form-item>
            </a-form>
          </div>
        </template>
      </CustomTable>
      <div style="display: none">
        <a-table
          id="printId"
          :loading="loading"
          bordered
          size="small"
          :dataSource="printDataList"
          :columns="printColumnsArr"
          :pagination="false"
        >
        </a-table>
      </div>
    </a-spin>
  </div>
</template>
<script>
import { ListMixinPm } from "@/mixin/listMixinPm.js";
import { columns } from "./modules/config.js";
import { cloneDeep } from "lodash";
import {
  filterObj,
  startTimeValue,
  endTimeValue,
  getLocalStorage,
  toLineName,
} from "@/utils";
import { mapState } from "vuex";
import { store } from "@/store";
import axios from "@/utils/request";
import printJS from "print-js";
import CustomTable from "@/components/commonTable/customTable.vue"
// import filterDropdown from "@/components/filterDropdown/filterDropdown.vue";

export default {
  name: "reworkStyleProcess",
  mixins: [ListMixinPm],
  components: { CustomTable },
  data() {
    return {
      columns: columns,
      spinning: false,
      printDataList: [],
      url: {
        list: "/api/report/get-rework-style-process",
        exportUrl: "/api/report/export-rework-style-process",
      },
      columnsArr: [],
      columnsTitleArr: [],
      printColumnsArr: [],
      queryParam: {},
      showData: false,
    };
  },
  async created() {
    await store.dispatch("getStyle");
    await store.dispatch("getAllMake");
    await store.dispatch("getWater");
    this.showData = true;
  },
  computed: {
    ...mapState({
      styleList: (state) => state.normalData.styleList,
      allMakeList: (state) => state.normalData.allMakeList,
      waterList: (state) => state.normalData.waterList,
    }),
  },
  methods: {
    // formatTime,
    handleTableChange(pagination, filters, sorter) {
      /*["styleNo", "moNo"].forEach((i) => {
        this.queryParam[i] = (filters || {})[i];
      });*/
      if (Object.keys(sorter).length > 0) {
        this.isorter.field = sorter.order ? toLineName(sorter.field) : "";
        this.isorter.order = sorter.order
          ? sorter.order == "ascend"
            ? "asc"
            : "desc"
          : "";
      }
      this.ipagination = Object.assign(this.ipagination, pagination);
      this.loadData();
    },
    getQueryParams() {
      if (!this.showData) return false;
      this.getColumnsList();
      let param = cloneDeep(this.queryParam);
      if (this.queryParam.time && this.queryParam.time.length) {
        param.startProductTime = startTimeValue(this.queryParam.time[0]);
        param.endProductTime = endTimeValue(this.queryParam.time[1]);
        this.queryParam.startProductTime = startTimeValue(
          this.queryParam.time[0]
        );
        this.queryParam.endProductTime = endTimeValue(this.queryParam.time[1]);
      } else {
        param.startProductTime = null;
        param.endProductTime = null;
        this.queryParam.startProductTime = null;
        this.queryParam.endProductTime = null;
      }
      delete param.time;
      param.sortingFields = this.isorter.field ? [this.isorter] : null;
      this.queryParam.sortingFields = this.isorter.field
        ? [this.isorter]
        : null;
      param.pageNo = this.ipagination.current;
      param.pageSize = this.ipagination.pageSize;
      // console.log(param)
      return filterObj(param);
    },

    async printTable() {
      await this.getColumnsList();
      this.queryParam.pageNo = 1;
      this.queryParam.pageSize = 65335;
      const res = await axios.postAction(this.url.list, this.queryParam);
      if (!res.data) return;
      this.spinning = true;
      if (res) {
        this.printDataList = res.data.list;
        if (this.printDataList.length > 0) {
          setTimeout(() => {
            this.printTableData();
            this.spinning = false;
          }, 2000);
        } else {
          this.spinning = false;
        }
      }
    },
    //打印
    printTableData() {
      printJS({
        printable: "printId", // 标签元素id
        type: "html",
        documentTitle: "["+this.$t('menu.report:outputSummaryStyle')+"]",
        style: "#printId{width:100%;} "
          + " #printId .ant-table-thead>tr>th, #printId .ant-table-tbody>tr>td  {border: 1px solid #bcb8b8;border-collapse: collapse;} "
          + " #printId table{border-collapse: collapse;} "
      });
    },
    async exportTable() {
      await this.getColumnsList();
      let param = {
        pageNo: 1,
        pageSize: 65335,
        columns: this.columnsArr,
        tables: this.columnsTitleArr,
        sortingFields: this.queryParam.sortingFields,
        startProductTime: this.queryParam.startProductTime,
        endProductTime: this.queryParam.endProductTime,
        styleNo: this.queryParam.styleNo,
        moNo: this.queryParam.moNo,
        lineNoList: this.queryParam.lineNoList,
      };
      this.exportExcels(this.url.exportUrl, "返工报表-款式-工序", true, param);
    },
    async getColumnsList() {
      let colArr = [];
      let paramsArr = [];
      let titleArr = [];
      let hangerTrackTable = getLocalStorage("reworkStyleProcess") ? getLocalStorage("reworkStyleProcess") : columns;

      if (hangerTrackTable && hangerTrackTable.length > 0) {
        hangerTrackTable.forEach((item) => {
          if (item.visibility) {
            paramsArr.push(item.dataIndex);
            titleArr.push(item.title);
            colArr.push(item);
          }
        });
      }
      this.columnsArr = paramsArr;
      this.columnsTitleArr = titleArr;
      this.printColumnsArr = colArr;
      // console.log(colArr,titleArr,paramsArr)
    },
  },
};
</script>
